<template>
  <div class="searchtype">
    <ul>
      <template v-for="type in types" :key="type.id">
	<li @click="submitType(type.name)">{{type.name}}</li>
      </template>
    </ul>
  </div>
</template>

<script lang="ts" setup>
 import { GoodsTypeService } from "@/service";
 import { ref, onMounted } from "vue";


 const emit = defineEmits(['submit-type'])
 const types = ref<Array<GoodsType>>([])

 function submitType(type: string) {
   emit('submit-type', type)
 }

 onMounted(async () => {
   types.value = await GoodsTypeService.findAll()
 })
</script>

<style lang="scss" scoped>
 div.searchtype {
   border: 1px solid black;
   width: 100px;
   display: flex;
   
   ul {
     padding: 5px;
     margin: 0;
     list-style: none;

     li {
       padding: 5px;
       cursor: pointer;

       &:hover {
	 background: #ecf0f1
       }
     }
   }
 }
</style>